<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer {
            width: 300px;
            height: 300px;
            background-color: deeppink;
        }

        .mid {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

        .inner {
            width: 100px;
            height: 100px;
            background-color: gold;
        }

        .common {
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .dot {
            width: 50px;
            height: 50px;
            background-color: #ccc;
            border-radius: 50%;
            position: absolute;
            transform: translate(-50%,-50%);
            z-index: -1;
        }
    </style>
</head>

<body>
    <!-- 如果绑定事件是在html标签内写的，那么事件源对象需要自己手动传递 -->
    <!-- <div class="outer" onclick="fn(event)"> -->
    <div class="outer common" myColor="deeppink">
        <div class="mid common" myColor="skyblue">
            <div class="inner common" myColor="gold"></div>
        </div>
    </div>
    <div class="dot"></div>

    <script>
        // 获取元素
        let outer = document.querySelector(".outer");
        let mid = document.querySelector(".mid");
        let inner = document.querySelector(".inner");
        let dot = document.querySelector(".dot");

        // function fn(e){
        //     console.log(e);
        // }

        // 给div绑定点击事件
        outer.onclick = function (e) {
            dot.style.backgroundColor = outer.getAttribute("myColor")
        }
        mid.onclick = function (e) {
            // 阻止事件传播
            e.stopPropagation();
            dot.style.backgroundColor = mid.getAttribute("myColor")
        }
        inner.onclick = function (e) {
            // 阻止事件传播
            e.stopPropagation();
            dot.style.backgroundColor = inner.getAttribute("myColor")
        }

        // 给document绑定鼠标移动的事件
        document.onmousemove = function (e) {
            dot.style.left = e.pageX + 'px'
            dot.style.top = e.pageY + 'px'
        }
    </script>
</body>

</html>